Ext.namespace('GBIF');
Ext.namespace('GBIF.GeoSpatial');

GBIF.GeoSpatial.WFSTpanel = function(config){

		this.vectors = new OpenLayers.Layer.Vector("Vector Layer");
		
		this.panel = new OpenLayers.Control.Panel();
		
		
	
		this.drawpoint= new OpenLayers.Control.DrawFeature(
	                    	this.vectors
						, 	OpenLayers.Handler.Point
						,	{
								title: "Point Feature"
							,	clickout:true	
							,	displayClass:'olControldrawpoint'
							,	featureAdded:this.savetogrid
							}
    	     )
            
		this.drawline = new OpenLayers.Control.DrawFeature(
                    		this.vectors
						, 	OpenLayers.Handler.Path
						,	{
								title: "Line Feature"
							,	clickout:true
							,	displayClass:'olControldrawline'
							,	featureAdded:this.savetogrid
							}
			)
            
		this.drawpolygon = new OpenLayers.Control.DrawFeature(
                    		this.vectors
						, 	OpenLayers.Handler.Polygon
						,	{
								title: "Polygon Feature"
							,	clickout:true
							,	displayClass:'olControldrawpolygon'
							,	featureAdded:this.savetogrid
							}
				)

		this.remove = new OpenLayers.Control.SelectFeature(this.vectors,
 	                    {	title: "Delete Feature"	
						,	onSelect: this.deleteFeature
						,	scope:this
						})
		
		this.modify= new OpenLayers.Control.ModifyFeature(
							this.vectors
						,	{
								title: "Modify Feature"
							,	onModificationEnd:this.savetogrid
							}
						)
		
		this.SelectFeature= new OpenLayers.Control.SelectFeature(
							this.vectors
	                    ,	{	title: "Select Feature"	
							,	onSelect:this.onselectfeature	
							,	deactivate:this.unselectFeature 
							,	scope:this
							}
						)				
	
		this.mouseControl = new OpenLayers.Control.MouseDefaults(
                    {title:'You can use the default mouse configuration'});	
			
		Ext.getCmp('grid').commit.on('click',this.senddata,this);
		
		Ext.getCmp('grid').on('rowClick',this.selectfeaturemap,this);
		
		Ext.getCmp('grid').on('deleteFeature',this.deletefeaturemap,this);
		
		Ext.getCmp('grid').on('centerToMap',this.moveMapToCenter,this);
		
		Ext.apply(this,config,{
				title: "Map"
       	 	,	width: 200
			,	ref:'../map'
		});
		
		
	GBIF.GeoSpatial.WFSTpanel.superclass.constructor.call(this, config)
}
Ext.extend(GBIF.GeoSpatial.WFSTpanel, GBIF.GeoSpatial.MapComponent, {
	
		controlPanel:function(){
			this.map.addLayer(this.vectors);
    		this.panel.addControls(
				[
						this.drawpolygon
					,	this.drawpoint
					,	this.drawline
					,	this.mouseControl
					,	this.remove
					,	this.modify
					,	this.SelectFeature
				]
			);
			this.map.addControl(this.panel);
		}
		
	,	moveMapToCenter:function(lon,lat){
				this.map.setCenter(new OpenLayers.LonLat(lon || 0 , lat || 0));
			}
	
	,	unselectFeature: function(){
				this.unselectAll();
		//		console.log(Ext.getCmp('grid'));
			}	
	
	,	selectfeaturemap:function(grid,index){
			var rec = grid.store.getAt(index);
			var veclayer;
				Ext.each(this.map.layers, function(maplayer){
						if( maplayer.name == "Vector Layer")
							veclayer = maplayer;		
				},this);
			var feature = veclayer.getFeatureById(rec.data.id);
			this.SelectFeature.unselectAll();
			this.SelectFeature.select(feature);
		}
	
	,	onselectfeature:function(layer){
			var grid = Ext.getCmp('grid');
			var index = grid.store.findExact("id",layer.fid);
			grid.getSelectionModel().selectRow(index);
		}
		
	,	savetogrid: function(){
			var point=[];
			var veclayer='';
			Ext.each(this.map.layers, function(maplayer){
				if( maplayer.name == "Vector Layer")
					Ext.each(maplayer.features,function(feature){
							feature.fid = feature.id;	
							switch(feature.geometry.CLASS_NAME) {
								case "OpenLayers.Geometry.Point":
									var type = "Point"
									break;
								case "OpenLayers.Geometry.LineString":
									var type = "Line"
									break;
								case "OpenLayers.Geometry.Polygon":
									var type = "Polygon"
									break;
								}
								var data = {
											"geometry": {
													"type": type
												, 	"coordinates": [feature.geometry.bounds.getCenterLonLat()]
												}
										,	state:feature.state
										, 	"type": "Feature"
										, 	"properties": {
													"name": ""
												}
										, "id": feature.id
										}
								point.push(data);
						},this);
			},this);
			
			var grid = Ext.getCmp('grid');
			grid.store.loadData(point);	
		}	
	
	,	senddata: function(){
			var grid = Ext.getCmp('grid');
			var params=[];//Ext.encode(grid.store.data.items);
			Ext.each(grid.store.data.items,function(items){
						params.push(items.json);
				},this);
			Ext.Ajax.request({
				url: "../../resources/api/proxy.php"
			,	method: 'POST'
			,	scope:this
			,	params:Ext.encode(params)
			,	success: function(responseObject){
						console.log('save',responseObject);	
 				}
			}, this);
		}
	
	,	deletefeaturemap:function(rec){
				Ext.each(this.map.layers, function(maplayer){
						if( maplayer.name == "Vector Layer")
							veclayer = maplayer;		
				},this);
				this.deleteFeature(veclayer.selectedFeatures);	
		}	
	
	,	deleteFeature:function(geometry){
				var veclayer;
				Ext.each(this.map.layers, function(maplayer){
						if( maplayer.name == "Vector Layer")
							veclayer = maplayer;		
				},this);
				veclayer.removeFeatures(geometry);
				this.savetogrid();
		}
 
})